<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="确认订单" navbarType='0'></wlk-navbar>
        <view class="pd30">
            <text class="line-title bold">{{lineInfo.title}}</text>
            <text class="line-desc ml20">{{lineInfo.desc}}</text>
            <view class="other-box">

                <view class="wlkflex other-info col9 mt20">
                    <view>人数</view>
                    <view class="value u-line-1">
                        <text >{{orderInfo.adult_num}}人</text>
                    </view>
                </view>
            </view>

        </view>
        <u-gap height="8" bgColor="#F9F9F9"></u-gap>
        <view class="pd30">
            <view class="head-title bold">联系人</view>
            <u--form
                    labelPosition="left"
                    :model="form"
                    :rules="rules"
                    ref="uForm"
                    labelWidth="100"
            >
                <u-form-item
                        label="姓名"
                        prop="realname"
                        borderBottom
                        ref="item"
                >
                    <u--input
                            :customStyle="{
                               padding:'13rpx 0'
                            }"
                            v-model="form.realname"
                            placeholder="请输入联系人姓名"
                            border="none"
                    ></u--input>
                </u-form-item>
                <u-form-item
                        label="手机号"
                        prop="mobile"
                        borderBottom
                        ref="item"
                >
                    <u--input
                            :customStyle="{
                                padding:'13rpx 0'
                            }"
                            v-model="form.mobile"
                            placeholder="请输入联系人手机号"
                            border="none"
                    ></u--input>
                </u-form-item>

            </u--form>
        </view>
        <u-gap height="8" bgColor="#F9F9F9"></u-gap>
        <view class="fixed-buy-btn wd100 wlkflex justify-between">
            <view class="calculate-info wlkflex">
                <block v-if="orderInfo.total_price>0">
                    <view class="bz">总价：</view>
                    <view class="price">￥{{orderInfo.total_price}}</view>
                    <view class="ml10">
                        <u-icon :name="showItem?'arrow-down':'arrow-up'" @click="setShowItem" size="10" color="#999"></u-icon>
                    </view>
                </block>
            </view>
            <view class="buy-btn">
                <u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor"  size="large" :disabled="!orderInfo.total_price>0" shape="circle" throttleTime="500" @click="submit" text="提交"></u-button>
            </view>
        </view>
      </view>
</template>

<script>
    import platform from '@/wlkutils/platform';
    var _self;
    import { mapGetters } from 'vuex';
	export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin'])
        },
		data() {
			return {
			    id:'',
                form:{
                    realname:'',
                    mobile:'',
                },
                rules: {
                    'realname': {
                        type: 'string',
                        required: true,
                        message: '请填写联系人姓名',
                        trigger: ['blur', 'change']
                    },
                    mobile: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['change','blur'],
                        },
                        {
                            validator: (rule, value, callback) => {
                                return uni.$u.test.mobile(value);
                            },
                            message: '手机号码不正确',
                            trigger: ['change','blur'],
                        }
                    ]
                },
            query:{},
            };
		},
		onLoad(options) {
		    _self = this;
		    this.query = this.$Route.query;
		},
        onShow() {
            this.getData();

        },
        onReady() {
            this.$refs.uForm.setRules(this.rules)
        },
        methods: {
            getData() {
                return new Promise((resolve, reject) => {
                    uni.$u.http.post('order/before', _self.orderInfo).then(res => {
                        _self.selectedDate = res.data.selectedDate;
                        _self.insurances = res.data.insurances;
                        _self.lineInfo = res.data.lineInfo;
                        if(!uni.$u.test.isEmpty(res.data.lastOrder)){
                            _self.form.realname = res.data.lastOrder.realname;
                            _self.form.mobile = res.data.lastOrder.mobile;
                        }
                        resolve();
                    }).catch(res => {
                        reject(res);
                    });
                });
            },

            submit(){
                this.$refs.uForm.validate().then(res => {
                    if (_self.passengers.length < _self.orderInfo.total_people){
                        uni.$u.toast('请完善出游人信息');
                        return
                    }
                    var json = _self.orderInfo;
                    json.selecteDayId = _self.selectedDate.id;
                    json.insurance_ids = _self.orderInfo.insurance_ids;
                    json.realname = _self.form.realname;
                    json.mobile = _self.form.mobile;
                    json.remark = _self.form.remark;
                    const passenger_ids = _self.passengers.map(obj => obj.id);
                    json.passenger_ids = passenger_ids.join(',');
                    json.platform = platform.get();
                    uni.$u.http.post('order/submit', json).then(res => {
                        _self.$Router.replace({
                            path: '/pages/pay/pay',
                            query: {
                                id:res.data.order_id,
                                type:'line'
                            }
                        })
                    }).catch(res => {

                    })
                })
            },
		}
    }

</script>

<style lang="scss">
    page{
        background-color: #FFFFFF!important;
        padding-bottom: 150rpx;
        .line-title{
            font-size: $font-lg;
        }
        .line-desc{
            font-size: $font-lt;
            color: #666666;
        }
        .other-box{
            margin-top: 50rpx;
            .other-info{
                font-size: $font-base;
                .value{
                    margin-left: 90rpx;
                    color: $uni-text-color;
                }
            }
        }

        .head-title{
            font-size: $font-lg;
            .desc{
                font-size: $font-base;
                font-weight: normal;
            }
        }
        .passenger-box{
            .add-btn{
                width: 31%;
                font-size: $font-lt;
                margin-top: 50rpx;
                .icon-box{
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    background-color: #F9F9F9;
                }
            }
            .passenger-item{
                padding: 30rpx 0;
                .item-info{
                    width: 80%;
                    .realname{
                        font-size: $font-lt;
                    }
                    .info{
                        color: $uni-text-color-grey;
                        font-size: $font-base;
                        .value{
                            width: 55%;
                            margin-left: 30rpx;
                        }
                    }
                }
            }

        }

        .fixed-buy-btn{
            position: fixed;
            z-index: 10076;
            padding: 20rpx 30rpx;
            background-color: #FFFFFF;
            bottom: 0;
            box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
            .calculate-info{
                width: 50%;
                font-size: $font-lt;
                .bz{
                }
                .price{
                    font-size: $font-max;
                    color: $-tour-price-color;
                }
            }
            .buy-btn{
                width: 40%;
            }
        }
        .order-item{
            padding-bottom: 150rpx;
            min-height: 800rpx;
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-lt;
                .info-flex{
                    .info-head{
                        font-size: $font-base;
                        font-weight: bold;
                    }
                    .info-desc{
                        font-size: $font-sm;
                    }
                    .info-price{
                        font-size: $font-base;
                        color: $-tour-price-color;
                    }
                    .info-desc-price{
                        font-size: $font-sm;
                    }
                }
            }
        }
    }



</style>
